<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【每日一练】83—用HTML&CSS 实现一个个人网页版简历的设计</title>
  <!--icon图标引入-->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: #181818;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .container {
      position: relative;
      width: 100%;
      max-width: 1000px;
      margin: 50px;
      background: #fff;
      border-left: 50px solid #fff;
      border-right: 50px solid #fff;
      box-shadow: 0 50px 75px rgba(0, 0, 0, 0.1);
    }

    .container .top {
      position: relative;
      display: grid;
      padding: 40px;
      padding-bottom: 0;
      grid-template-columns: 1fr 2fr;
    }

    .container .top .imgBx {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .container .top .imgBx .box {
      position: relative;
      width: 70%;
      min-width: 200px;
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
    }

    .container .top .imgBx .box img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .container .top .profileText {
      position: relative;
      padding: 40px;
      display: flex;
      align-items: center;
    }

    .container .top .profileText h3 {
      font-size: 3em;
      letter-spacing: 0.1em;
      line-height: 1.2em;
      font-weight: 600;
      color: #333;
    }

    .container .top .profileText h3 span {
      position: relative;
      top: -10px;
      font-weight: 300;
      font-size: 0.5em;
    }

    .container .contentBox {
      position: relative;
      min-height: 500px;
      display: grid;
      padding: 0 40px 40px;
      grid-template-columns: 1fr 2fr;
    }

    .container .contentBox h3 {
      border-left: 4px solid #5CB8E4;
      padding-left: 10px;
      line-height: 1em;
      font-weight: 600;
      color: #333;
      letter-spacing: 0.1em;
      margin-bottom: 20px;
      margin-top: 50px;
    }

    .container .contentBox ul {
      position: relative;
      margin: 10px 0;
    }

    .container .contentBox ul li {
      list-style: none;
      margin: 25px 0;
      line-height: 1em;
      color: #333;
      cursor: pointer;
      display: flex;
    }

    .container .contentBox ul li ion-icon {
      font-size: 1.2em;
      margin-right: 10px;
      color: #8758FF;
    }

    .container .contentBox ul.education li {
      flex-direction: column;
      margin: 25px 0;
    }

    h5 {
      color: #8758FF;
    }

    h4 {
      color: #333;
      font-weight: 500;
      margin: 5px 0;
    }

    h6 {
      color: #666;
      font-weight: 300;
      font-size: 1em;
    }

    .language li {
      flex-direction: column;
    }

    .language li span {
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }

    .language .percent {
      position: relative;
      width: 100%;
      margin-top: 15px;
      margin-bottom: 10px;
      height: 6px;
      background: #e3e3e3;
      display: block;
      overflow: hidden;
    }

    .language .percent div {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #8758FF;
    }

    .container .contentBox ul.interest {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .container .contentBox ul.interest li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 20px 0px;
    }

    .container .contentBox ul.interest li .icon {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 5px;
      background: #8758FF;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container .contentBox ul.interest li ion-icon {
      color: #fff !important;
      margin-right: 0px;
    }

    p {
      font-weight: 300;
    }

    .rightSide {
      padding-left: 40px;
    }

    .about .box {
      display: flex;
      flex-direction: row;
      margin: 20px 0;
    }

    .about .box .year_company {
      min-width: 150px;
      margin-bottom: 10px;
    }

    .about .box .year_company h5 {
      color: #333;
      font-weight: 600;
    }

    .about .box .year_company h5:nth-child(1) {
      color: #8758FF;
    }

    .about .box .text h4 {
      color: #8758FF;
      font-size: 16px;
      margin: 0;

    }

    .about.skills .box {
      position: relative;
      width: 100%;
      display: grid;
      grid-template-columns: 150px 1fr;
      justify-content: center;
      align-items: center;
    }

    .about.skills .box h4 {
      color: #333;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .about.skills .box .percent {
      position: relative;
      width: 100%;
      height: 10px;
      background: #e3e3e3;
    }

    .about.skills .box .percent div {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #8758FF;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="top">
      <div class="imgBx">
        <div class="box">
          <img src="web.png">
        </div>
      </div>
      <div class="profileText">
        <h3>杨小爱<br>设计&开发<br><span>前端网页设计师&平面设计师</span></h3>
      </div>
    </div>
    <div class="contentBox">
      <div class="leftSide">
        <h3>我的联系方式</h3>
        <ul>
          <li>
            <span class="icon">
              <ion-icon name="call-outline"></ion-icon>
            </span>
            <span class="text">13127757553</span>
          </li>
          <li>
            <span class="icon">
              <ion-icon name="mail-outline"></ion-icon>
            </span>
            <span class="text">13127757553@163.com</span>
          </li>
          <li>
            <span class="icon">
              <ion-icon name="earth-outline"></ion-icon>
            </span>
            <span class="text">www.webqdkf.com</span>
          </li>
          <li>
            <span class="icon">
              <ion-icon name="location-outline"></ion-icon>
            </span>
            <span class="text">上海市闵行区</span>
          </li>
        </ul>
        <h3>教育经历</h3>
        <ul class="education">
          <li>
            <h5>2010 - 2013</h5>
            <h4>学习专业学位</h4>
            <h6>学校名称</h6>
          </li>
          <li>
            <h5>2007 - 2010</h5>
            <h4>学习专业学位</h4>
            <h6>学校名称</h6>
          </li>
          <li>
            <h5>1997 - 2007</h5>
            <h4>学习专业学位</h4>
            <h6>学校名称</h6>
          </li>
        </ul>
        <h3>我使用的编程技术</h3>
        <ul class="language">
          <li>
            <span class="text">Html</span>
            <span class="percent">
              <div style="width: 95%"></div>
            </span>
          </li>
          <li>
            <span class="text">CSS</span>
            <span class="percent">
              <div style="width: 90%"></div>
            </span>
          </li>
          <li>
            <span class="text">Javascript</span>
            <span class="percent">
              <div style="width: 85%"></div>
            </span>
          </li>
        </ul>
        <h3>我的兴趣爱好</h3>
        <ul class="interest">
          <li><span class="icon">
              <ion-icon name="game-controller-outline"></ion-icon>
            </span>游戏</li>
          <li><span class="icon">
              <ion-icon name="mic-outline"></ion-icon>
            </span>旅行游玩</li>
          <li><span class="icon">
              <ion-icon name="book-outline"></ion-icon>
            </span>看书阅读</li>
          <li><span class="icon">
              <ion-icon name="cafe-outline"></ion-icon>
            </span>研究美食</li>
        </ul>
      </div>
      <div class="rightSide">
        <div class="about">
          <h3>自我介绍</h3>
          <p>你好，我是杨小爱，湖南人，【web前端开发】公众号的创始人兼主理人。<br>
            计算机网络专业毕业，毕业后，入坑互联网行业，目前长居上海工作生活，4年+自由职业者，专为创业企业和中小企业提供一站式的企业宣传服务，
            从线下的平面宣传广告设计到企业VI形象，以及线上的网站开发制作，UI设计，均可以为您提供专业设计开发服务。<br>
            欢迎前来合作咨询，我的微信号:【web-qdkf】,非诚不扰，非常感谢。<br>
            <br>
          </p>
        </div>
        <div class="about">
          <h3>工作经验</h3>
          <div class="box">
            <div class="year_company">
              <h5>2014 - 2016</h5>
              <h5>公司名称</h5>
            </div>
            <div class="text">
              <h4>前端网页设计师</h4>
              <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
            </div>
          </div>
          <div class="box">
            <div class="year_company">
              <h5>2016 - 2019</h5>
              <h5>公司名称</h5>
            </div>
            <div class="text">
              <h4>前端网页设计师</h4>
              <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
            </div>
          </div>
          <div class="box">
            <div class="year_company">
              <h5>2019 - 现在</h5>
              <h5>公司名称</h5>
            </div>
            <div class="text">
              <h4>前端网页设计师</h4>
              <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p>
            </div>
          </div>
        </div>
        <div class="about skills">
          <h3>专业技能</h3>
          <div class="box">
            <h4>Html</h4>
            <span class="percent">
              <div style="width: 90%"></div>
            </span>
          </div>
          <div class="box">
            <h4>CSS</h4>
            <span class="percent">
              <div style="width: 95%"></div>
            </span>
          </div>
          <div class="box">
            <h4>Javascript</h4>
            <span class="percent">
              <div style="width: 80%"></div>
            </span>
          </div>
          <div class="box">
            <h4>Photoshop</h4>
            <span class="percent">
              <div style="width: 90%"></div>
            </span>
          </div>
          <div class="box">
            <h4>Illustrator</h4>
            <span class="percent">
              <div style="width: 95%"></div>
            </span>
          </div>
          <div class="box">
            <h4>Adobe XD</h4>
            <span class="percent">
              <div style="width: 78%"></div>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>